<template>
  <custom-navbar
    title="教育经历"
    :auto-back="true"
    left-icon-color="#303133"
  />
  <up-gap height="30rpx" />
  <view class="block-box">
    <view class="flex items-center py-36rpx">
      <view class="mr-24rpx shrink-0">
        <up-image width="84rpx" height="84rpx" shape="circle" />
      </view>
      <view>
        <view class="mb-10rpx text-30rpx color-#1d2129 leading-42rpx">
          北京科技大学
        </view>
        <view class="flex text-24rpx color-#4e5969 leading-34rpx">
          <text>2015.07-2024.09</text>
          <up-line
            length="30rpx"
            color="#4f5760"
            direction="col"
            margin="0 12rpx"
          />
          <text>硕士</text>
          <up-line
            length="30rpx"
            color="#4f5760"
            direction="col"
            margin="0 12rpx"
          />
          <text>药剂</text>
          <up-line
            length="30rpx"
            color="#4f5760"
            direction="col"
            margin="0 12rpx"
          />
          <text>留学</text>
        </view>
      </view>
      <view class="ml-auto">
        <up-icon name="arrow-right" color="#4e5969" width="24rpx" height="42rpx" />
      </view>
    </view>
  </view>
  <view class="block-box">
    <view class="flex items-center py-36rpx">
      <view class="mr-24rpx shrink-0">
        <up-image width="84rpx" height="84rpx" shape="circle" />
      </view>
      <view>
        <view class="mb-10rpx text-30rpx color-#1d2129 leading-42rpx">
          北京科技大学
        </view>
        <view class="flex text-24rpx color-#4e5969 leading-34rpx">
          <text>2015.07-2024.09</text>
          <up-line
            length="30rpx"
            color="#4f5760"
            direction="col"
            margin="0 12rpx"
          />
          <text>硕士</text>
          <up-line
            length="30rpx"
            color="#4f5760"
            direction="col"
            margin="0 12rpx"
          />
          <text>药剂</text>
          <up-line
            length="30rpx"
            color="#4f5760"
            direction="col"
            margin="0 12rpx"
          />
          <text>留学</text>
        </view>
      </view>
      <view class="ml-auto">
        <up-icon name="arrow-right" color="#4e5969" width="24rpx" height="42rpx" />
      </view>
    </view>
  </view>
  <view>
    <view class="h-190rpx pb-safe" />
    <view
      class="fixed bottom-0 left-0 w-100% flex items-center justify-between bg-#fff px-24rpx pt-24rpx pb-safe"
    >
      <up-button
        :custom-style="{
          background: '#1f50f2',
          color: '#fff',
          height: '82rpx',
          fontSize: '30rpx',
        }"
        shape="circle"
        text="确定"
      />
    </view>
  </view>
</template>

<script setup lang="ts">
</script>

<style lang="scss" scoped>
.block-box {
  @apply mx-auto mb-24rpx w-[702rpx] shadow-[0rpx_6rpx_16rpx_0rpx_rgba(191,191,191,0.26)] rounded-[20rpx] bg-#fff p-24rpx;

  &.py-0 {
    padding-top: 0;
    padding-bottom: 0;
  }
}
</style>
